<template>
  <!--出低价-->
  <el-dialog
    :close-on-click-modal="false"
    title="我有低价"
    :visible.sync="dialogVisible4"
    :beforeClose="handleClose4"
    width="500px"
  >
    <div>
      <el-form
        size="mini"
        :model="sendForm4"
        label-width="120px"
        ref="sendForm4"
        :rules="rules4"
      >
        <el-form-item label="品名牌号："
          ><span
            >{{ sendForm4.goodsName }}{{ sendForm4.goodsSn }}</span
          ></el-form-item
        >
        <el-form-item label="数量（吨）："
          ><span>{{ sendForm4.goodsNum1 }}</span></el-form-item
        >
        <el-form-item label="报价："
          ><span>{{ sendForm4.purchasePrice1 }}</span></el-form-item
        >
        <el-form-item label="交货地：" width="150" prop="sendAreaId">
          <el-cascader
            filterable
            clearable
            v-model="sendForm4.sendAreaId"
            :props="{
              value: 'areaId',
              label: 'areaName',
              children: 'children',
            }"
            :options="data2"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="交货方式：" width="150" prop="priceSendTypes">
          <el-radio-group v-model="sendForm4.priceSendTypes">
            <el-radio label="送到"></el-radio>
            <el-radio label="自提"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="结算方式：" width="150" prop="pricePayTypes">
          <span>{{ pricePayTypes }}</span>
          <!-- <el-radio-group v-model="sendForm4.pricePayTypes">
            <el-radio label="现金"></el-radio>
            <el-radio label="承兑"></el-radio>
          </el-radio-group> -->
        </el-form-item>
        <el-form-item label="低价：" prop="purchasePrice">
          <el-input
            v-model="sendForm4.purchasePrice"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="报价数量（吨）：" prop="goodsNum">
          <el-input
            v-model="sendForm4.goodsNum"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input
            v-model="sendForm4.priceRemark"
            type="textarea"
            placeholder="请填写供应商及联系方式"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose4">取 消</el-button>
      <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4"
        >确 认</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { commitInquiryIntroduce, getAreaList } from "@/api/allInLine/inquiry";
import { validatePhone } from "@/utils/validate";
import { formatDate } from "@/utils/date";
import store from "@/store";
import { mapGetters } from "vuex";
import { Message } from "element-ui";

const defaultSendForm4 = {
  inquiryId: "", //询价记录ID
  sendAreaId: "", //交货地
  purchasePrice1: "", // 旧报价
  priceSendTypes: "", //交货方式
  //pricePayTypes: "", //交易方式
  priceRemark: "", //备注
  goodsName: "", //品名
  goodsSn: "", // 牌号
  goodsNum1: "", //数量
  goodsNum: "", //报价数量
  purchasePrice: "", // 报价
};

export default {
  name: "addPrice",
  data() {
    // const isvalidateInput = (rule, value, callback) => {
    //   if (value > this.sendForm4.purchasePrice1) {
    //     callback(new Error("低价金额不能高于报价"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      dialogVisible4: false,
      btnLoading4: false,
      sendForm4: JSON.parse(JSON.stringify(defaultSendForm4)),
      pricePayTypes:"",
      rules4: {
        sendAreaId: [
          { required: true, message: "去选择交货方式", trigger: "change" },
        ],
        priceSendTypes: [
          { required: true, message: "去选择交货地", trigger: "change" },
        ],
        // pricePayTypes: [
        //   { required: true, message: "去选择交易方式", trigger: "change" },
        // ],
        goodsNum: [
          { required: true, message: "请填写报价数量", trigger: "blur" },
        ],
        purchasePrice: [
          { required: true, message: "请填写报价", trigger: "blur" },
          // { validator: isvalidateInput, trigger: "blur" },
        ],
      },
      data: [],
      data2: [],
      dataLoading: false,
    };
  },
  computed: {
    ...mapGetters(["name", "mobile", "userId"]),
  },
  components: {},
  created() {},
  filters: {},
  methods: {
    //显示我有低价
    showPop4(item) {
      this.dialogVisible4 = true;
      this.getAreaLists();
      this.pricePayTypes = item.pricePayTypes;
      this.sendForm4.goodsName = item.goodsName;
      this.sendForm4.goodsSn = item.goodsSn;
      this.sendForm4.purchasePrice1 = item.purchasePrice;
      this.sendForm4.inquiryId = item.inquiryId;
      this.sendForm4.goodsNum1 = item.goodsNum;
    },
    //关闭我有低价
    handleClose4() {
      this.dialogVisible4 = false;
      this.$refs.sendForm4.resetFields();
      this.sendForm4 = JSON.parse(JSON.stringify(defaultSendForm4));
    },

    //确认低价
    handleConfirm4() {
      this.$refs.sendForm4.validate((valid) => {
        if (valid) {
          this.btnLoading4 = true;
          const data = JSON.parse(JSON.stringify(this.sendForm4));
          data.sendAreaId = data.sendAreaId
            ? data.sendAreaId[data.sendAreaId.length - 1]
            : "";
          delete data.purchasePrice1;
          delete data.goodsNum1;
          delete data.goodsName;
          delete data.goodsSn;
          commitInquiryIntroduce(data)
            .then((res) => {
              Message.success("提交成功");
              this.btnLoading4 = false;
              this.$refs.sendForm4.resetFields();
              this.sendForm4 = JSON.parse(JSON.stringify(defaultSendForm4));
              this.$emit("update");
              this.dialogVisible4 = false;
            })
            .catch((err) => {
              this.btnLoading4 = false;
            });
        }
      });
    },
    //获取地区列表
    getAreaLists() {
      this.dataLoading = true;
      getAreaList().then((res) => {
        this.data = res;
        this.data2 = [];
        this.data2 = this.forTree(this.data);
        this.dataLoading = false;
      });
    },
    //去除不要的children
    forTree(list) {
      let newList = list;
      if (newList.length) {
        for (let i = 0; i < newList.length; i++) {
          if (newList[i].children && newList[i].children.length > 0) {
            this.forTree(newList[i].children);
          } else {
            delete newList[i].children;
          }
        }
        return newList;
      }
    },
  },
};
</script>

<style  lang="scss">
</style>
